<template>
    <my-header navType="list"></my-header>
    <view class="container">
      <view class="news-list" v-for="(item, index) in newsList" :key="index" @click="goDetail(item)">
        <view class="news-user">
          <view class="ranking-index" style="width: 24px;height: 24px;" :class="index === 0 ? 'ranking-one' : index === 1 ? 'ranking-two' : index === 2 ? 'ranking-three' : ''">
            <text class="num">{{ index + 1 }}</text>
          </view>
          <view style="width: 24px;height: 24px;margin-left: 4px;">
            <image class="user_avatar" :src="item.avatar" @error="onImageError(item)" />
            <!-- <up-parse ref="upAvatarRef" :content="item.avatar"></up-parse> -->
          </view>
          <text class="user-name">{{ item.author }}</text>
          <text style="color: rgba(0, 0, 0, 0.4);margin: 0 6px;">·</text>
          <text class="news-time">{{ item.date }}</text>
        </view>
        <text class="up-line-1 news-title">{{ item.title }}</text>
        <view class="news-content">
          <view class="content" :style="{width: item.attachment ? 'calc(100% - 116px)' : '100%'}">
            <up-parse :content="item.summary" :tagStyle="styleSummary"></up-parse>
          </view>
          <img v-if="item.attachment" style="width: 108px;height: 70px;" :src="item.attachment" alt="">
        </view>
      </view>
    </view>
    <my-action-sheet v-if="showActionSheetModel"></my-action-sheet>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { useUserStore } from '@/stores'
  import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
  import { getNewsListAPI } from '@/api/news'
  // import { checkImageInHtml } from '@/utils/common'
  
  const userStore = useUserStore()
  
  const newsList = ref<any>([])
  const showActionSheetModel = ref(true)
  
  const styleSummary = {text: 'display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;'}
  
  // 获取文章列表
  const getNewsList = async () => {
    const res: any = await getNewsListAPI()
    newsList.value = res
    newsList.value.forEach((element: any) => {
      const srcMatch = element.avatar.match(/<img.*?src=["'](.*?)["']/);
      if (srcMatch && srcMatch[1]) {
        element.avatar = srcMatch[1]
      }
    })
    uni.stopPullDownRefresh()
  }
  
  // 头像不能正常显示的时候显示默认图片
  const onImageError = (item: any) => {
    item.avatar = 'https://images-cloud.qboson.com/community/avatar/noavatar.svg'
  }
  
  //  actionSheet暂不登录操作按钮
  uni.$on('closeActionSheet',function(){
    showActionSheetModel.value = false
    // loginStore.TokenStatus
    userStore.clearUserInfo()
    uni.showTabBar({ animation: false })
  })
  
  onLoad(() => {
    getNewsList()
  })
  
  // 下拉刷新
  onPullDownRefresh(() => {
    getNewsList()
  })
  
  onShow(() => {
    const userInfo = userStore.userInfo
    const loginStatus = userStore.loginStatus
    getNewsList()
    if (userInfo !== undefined || loginStatus) {
      showActionSheetModel.value = false
      uni.showTabBar({ animation: false })
    } else {
      showActionSheetModel.value = true
      uni.hideTabBar({ animation: false })
    }
  })
  
  // 跳转详情页面
  const goDetail = (item: any) => {
    uni.navigateTo({
      // url: `detail?tid=${item.tid}`
      url: `/pagesA/index/detail?tid=${item.tid}`
    })
  }
  </script>
  
  <style lang="scss">
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'PingFang SC';
    // margin-top: 88px;
    // justify-content: center;
    .news-list {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 90%;
      border-bottom: 1px solid #F2F2F2;
      padding: 16px 0;
      .news-user {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        .user_avatar {
          width: 100%;
          height: 100%;
          border-radius: 50px;
        }
        .ranking-index {
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: 600;
          line-height: 12px;
          /* 主色 */
          color: #2A65FF;
        }
        .ranking-one {
          background-image: url('/static/img/one.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          .num {
            margin-top: 4px;
          }
        }
        .ranking-two {
          background-image: url('/static/img/two.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          color: #fff;
          .num {
            margin-top: 4px;
          }
        }
        .ranking-three {
          background-image: url('/static/img/three.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          color: #fff;
          .num {
            margin-top: 4px;
          }
        }
        .user-name {
          line-height: 21px;
          letter-spacing: 0px;
          /* base/font/gy1 */
          color: rgba(0, 0, 0, 0.9);
          margin-left: 4px;
        }
        .news-time {
          line-height: 21px;
          letter-spacing: 0px;
          /* base/font/gy3 */
          color: rgba(0, 0, 0, 0.4);
        }
      }
      .news-title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
        margin-top: 8px;
      }
      .news-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        .content{
          // width: calc(100% - 116px);
          font-size: 14px;
          line-height: 22px;
          letter-spacing: 0px;
          /* base/font/gy2 */
          color: rgba(0, 0, 0, 0.6);
          text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  </style>
  